<template>
  <div class="userInfo">
    <img :src="info.avatar" alt="" class="userImg">
    <div class="info">
      <p>游戏ID: <i v-text="info.nickname"></i> <small v-text="info.team"></small></p>
      <p>QQ号码: <i v-text="info.qq"></i></p>
      <p>当前积分: <i v-text="info.integral"></i></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserBar",
  props:{
    info:{
      type:Object,
      default:{}
    }
  }
}
</script>

<style scoped>
.userInfo{
  width: 95%;
  margin: 20px auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  padding: 35px 15px;
  background: var(--el-color-primary-light-3);
  border-radius: 4px;
}
.userImg{
  width: 75px;
  height: 75px;
  border-radius: 100%;
  display: inline-flex;
  border: 2px solid #ffffff;
  padding: 3px;
}
.info{
  width: calc(100% - 95px - 60px);
  color: #ffffff;
  padding: 0 10px;
}
.info p{
  padding: 0;
  margin: 0;
  line-height: 25px;
}
.info p b{
  font-size: 12px;
  background: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  border-radius: 4px;
  color: #333333;
}
.info p .f{
  background:#efefef;
}
small{
  padding: 4px 15px;
  height: 34px;
  line-height: 34px;
  background: #fff;
  color: #333333;
  border-radius: 4px;
  margin-left: 10px;
}
</style>